//定义全局变量 存储 数据


//定义全局变量 存储 动态生成页面前的数据
let str = '';

//获取标签对象
const tBody = document.querySelector('tbody');

const oBtnAdd = document.querySelector('.add');

const oDivMask = document.querySelector('#mask');

let arr;
//查
findMsg()
deleMsg();
addMsg();

function findMsg() {


    if (localStorage.article_list !== undefined) {
        console.log(111);
        arr = JSON.parse(localStorage.article_list);
        setPage();
    } else {
        console.log(333);
        NetWorkMsg();
    }
}
async function NetWorkMsg() {
    const responst = JSON.parse(await myPromiseAjax('https://api.iynn.cn/mock', 'get', 't=2'));
    console.log(responst);
    //将接口获取到的数据存储到localStorage
    localStorage.article_list = JSON.stringify(responst.data);

    //从localStorage中获取数据,转json
    arr = JSON.parse(localStorage.article_list);
    setPage();
}

//获取localStorage数据动态加载到页面
function setPage() {
    // tBody.innerHTML = '';
    // console.log(arr.length);
    arr.forEach(function (item, key) {
        str += `
                <tr>
                    <td>${item.id}</td>
                    <td>${item.title}</td>
                    <td>${item.user}</td>
                    <td>${item.date}</td>
                    <td><button name="dele" index=${key}>删除</button><button name="chang" index=${key}>编辑</button></td>
                </tr>
            `;
    })




    tBody.innerHTML = str;
}


function deleMsg() {
    tBody.addEventListener('click', function (e) {
        if (e.target.getAttribute('name') === 'dele') {
            arr.splice(e.target.getAttribute('index'), 1);
            console.log(arr);
            localStorage.article_list = JSON.stringify(arr);

            arr = JSON.parse(localStorage.article_list);

            console.log(arr);
            str = ''
            // tBody.innerHTML = '';
            setPage();
        } else if (e.target.getAttribute('name') === 'chang') {
            oDivMask.style.display = 'block';

            const changeTitle = oDivMask.querySelector('[name="title"]');
            const changeUser = oDivMask.querySelector('[name="user"]');
            const changeDate = oDivMask.querySelector('[name="date"]');
            const changeTrue = oDivMask.querySelector('[name="true"]');
            const changeFalse = oDivMask.querySelector('[name="false"]');
            const changeClose = oDivMask.querySelector('[name="titleClose"]');

            changeFalse.addEventListener('click', function () {
                oDivMask.style.display = 'none';
            })
            changeClose.addEventListener('click', function () {
                oDivMask.style.display = 'none';
            })

            changeTrue.setAttribute('index',e.target.getAttribute('index'));

            arr = JSON.parse(localStorage.article_list);

            const changeObj = arr[e.target.getAttribute('index')];
            console.log(changeObj);

            changeTitle.value = changeObj.title;
            changeUser.value = changeObj.user;
            changeDate.value = changeObj.date;


            changeTrue.addEventListener('click',function(){
                changeObj.title = changeTitle.value;
                changeObj.user = changeUser.value;
                changeObj.date = changeDate.value;

                localStorage.article_list = JSON.stringify(arr);
                str = '';
                setPage();
                oDivMask.style.display = 'none';
            })
        }
    })
}

//添加
function addMsg() {
    const addTitle = oBtnAdd.querySelector('[name="title"]');
    const addUser = oBtnAdd.querySelector('[name="user"]');
    const addDate = oBtnAdd.querySelector('[name="date"]');
    const addBtn = oBtnAdd.querySelector('button');

    addBtn.addEventListener('click', function () {
        let addtitle = addTitle.value;
        let adduser = addUser.value;
        let adddate = addDate.value;

        const obj = { id: Number(arr[arr.length - 1].id) + 1, title: addtitle, user: adduser, date: adddate };

        console.log(obj);

        arr.push(obj);
        localStorage.article_list = JSON.stringify(arr);
        str = '';
        setPage();
    })
}